<html>
	<html lang="zh-CN">

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

		<meta name="description" content="自己动手，丰衣足食。" />
		<meta name="author" content="kaneren" />
		<base target="_blank" />
		<link rel="icon" href="img/favicon.png" />
		<title>Navi | 导航</title>

		<style>
			body {
				background-image: url(img/background.png);
				background-size: cover;
			}
			
			.container {
				display: table;
				height: 100%;
			}
			
			.row {
				display: table-cell;
				vertical-align: middle;
			}
			
			.row-centered {
				text-align: center;
			}
			
			#search {
				background-color: rgba(245, 245, 245, 0.5);
				type: text;
				transition: background-color 1s;
			}
			
			#search:hover {
				background-color: rgba(245, 245, 245, 0.9);
			}
			
			#hyperlink {
				background-color: rgba(245, 245, 245, 0.5);
				box-shadow: 0 4px 8px rgba(255, 255, 0, 0.2), 0 6px 20px rgba(255, 255, 0, 0.19);
				transition: background-color 2s;
			}
			
			#hyperlink:hover {
				background-color: rgba(245, 245, 245, 0.9);
			}
			
			#hyperlink a {
				border-radius: 5px;
				color: black;
				font-size: 1.3em;
				line-height: 2em;
				text-align: center;
				text-decoration: none;
				transition: background-color 1s;
			}
			
			#hyperlink a:hover {
				background-color: rgb(105, 105, 105);
				color: rgb(245, 245, 245);
			}
			
			.foot {
				color: gold;
				text-align: center;
			}
			
			.foot a:link,
			.foot a:visited {
				color: orange;
				text-decoration: none;
				transition: color 2s, font-size 2s;
			}
			
			.foot a:hover {
				color: yellow;
				text-decoration: none;
				font-size: 1.3em;
			}
		</style>

		<!-- Bootstrap -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- font-awesome -->
		<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css" />

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div class="container">
			<div class="row row-centered">
				<!-- GoogleSearch -->
				<form method="get" action="https://www.google.com/search">
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon"><i class="fa fa-google fa-lg"></i></div>
							<input id="search" class="form-control input-lg" name="q" maxlength="255" onmouseover="this.focus()" onfocus="this.select()" autofocus="autofocus" />
						</div>
					</div>
				</form>
				<br />
				<!-- BaiduSearch -->
				<form action="https://www.baidu.com/baidu">
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon"><i class="fa fa-bold fa-lg"></i></div>
							<input id="search" class="form-control input-lg" name="wd" onmouseover="this.focus()" onfocus="this.select()" />
						</div>
					</div>
				</form>
				<br />
				<!-- Hyperlink -->
				<div id="hyperlink" class="panel panel-default">
					<div class="panel-body">
						<div class="row">

							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="https://github.com/">
								<i class="fa fa-github" style="color: black;"></i> GitHub
							</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="https://gitee.com/">
								<i class="fa fa-rss" style="color: black;"></i> Gitee
							</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="https://leetcode.com/">
								<i class="fa fa-file-code-o" style="color: black;"></i> LeetCode
							</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://stackoverflow.com/">
								<i class="fa fa-stack-overflow" style="color: black;"></i> StackOverFlow
							</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="https://accounts.google.com/">
								<i class="fa fa-envelope" style="color: black;"></i> Gmail
							</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://email.163.com/">
								<i class="fa fa-envelope-o" style="color: black;"></i> 网易邮箱
							</a>

							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://www.w3schools.com/">w3schools</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="https://www.coursera.org">Coursera</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://www.codeproject.com/">CodeProject</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="https://news.ycombinator.com/">HackerNews</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://www.google.cn/maps/">GoogleMap</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://fanyi.baidu.com">百度翻译</a>

							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="https://mp.weixin.qq.com/">公众平台</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://study.163.com/">网易云课堂</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="https://www.jd.com/">京东</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://www.suning.com/">苏宁易购</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://www.mi.com/">小米</a>
							<a class="col-xs-6 col-sm-4 col-md-3 col-lg-2" href="http://www.soharp.com/">蓝调口琴网</a>

						</div>
					</div>
				</div>
				<!-- Direction -->
				<div class="foot">
					<p>
						<a href="https://github.com/kaneren/navi"><i class="fa fa-github-square fa-lg"></i></a>
						| <strong>&copy; 2016 <i class="fa fa-heart" style="color: red;"></i> Kane Ren</strong> |
						<a href="about.html">关于</a>
					</p>
					<p>
						要获得最佳使用体验，请使用
						<a rel="browser" href="http://browsehappy.com/">最新版本浏览器</a>访问本站。 本作品采用
						<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可。
					</p>
				</div>
			</div>
		</div>
		<!-- /.container -->

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>

	</body>

	</html>